<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		
		
		<div id="app">
			
			<button class="btn btn-success" @click="sendGet()" type="button">发起GET</button>
			<br>
			<button class="btn btn-info" @click="sendPost()" type="button">发起POST</button>
		</div>
		
		<script>
			
			var  vue = new Vue({
				el:"#app",
				data:{},
				methods:{
					sendGet:function(){
						//1.如何发送get axios
						//2.如何传递参数
						//3.如何接受返回值[返回值包装]
						//返回的数据被包装,我们的数据装到 返回数据.body上!
						var url = "http://localhost:8080/sms/bill/info";
						
						this.$http.get(url,{params:{id:2}}).then(function(data){
							var resultVo = data.body; //获取我们返回的json
							alert(JSON.stringify(resultVo));
						});
					},
					sendPost:function(){
						//1.如何发送post axios
						//2.如何传递参数
						//3.如何接受返回值[返回值包装]
						//4.总结:
						/**
						 *  axios如果是请求方式是get 虽然看着像传递的是json其实是key=value!
						 *  前端使用axios,并且是get方法,后台一定不能使用@RequestBody
						 * 
						 *  axios如果是请求方式是post 虽然看着像传递的是json,其实真是json,
						 *  而且只支持json!
						 *  前端使用axios,并且是post方法,后台一定使用@RequestBody
						 * 
						 * 
						 */
						
						
						var url = "http://localhost:8080/sms/bill/search";
						
						this.$http.post(url,{name:"卫"}).then(function(data){
							alert(JSON.stringify(data.body))
						});
					}
				},
				//window.onload 页面加载完毕
				mounted:function(){
					var url = "http://localhost:8080/sms/bill/providers";
					this.$http.get(url,{params:{}}).then(function(data){
						alert(JSON.stringify(data.body));
					});
				}
			
			});
			
		</script>
	</body>
</html>
